.<template>
  <div v-if="data">
    <div class="material">
      <div class="matLeft">
        <img v-if="data.head_img" :src="'http://liangwei.tech:3000'+data.head_img" alt />
        <img v-else src="@/assets/54ecb5b94bd0c78011cbaf9a593b48c8.png" alt />
      </div>
      <div class="matcenter">
        <div class="matcenter_name">
          <span v-if="data.gender" class="iconfont iconxingbienan"></span>
          <span v-else class="iconfont iconxingbienv"></span>
          <span class="name">{{data.nickname}}</span>
        </div>
        <div class="time">{{data.create_date.split('T')[0]}}</div>
      </div>
      <div class="matright" @click="goExit">
        <span class="iconfont iconjiantou1"></span>
      </div>
    </div>
    <div class="PerList">
      <PerBar barMe="我的关注" barRight="关注的用户" @barClick="$router.push({path:'/personAttention'})"></PerBar>
      <PerBar barMe="我的跟帖" barRight="跟帖/回复" @barClick></PerBar>
      <PerBar barMe="我的收藏" barRight="文章/视频" @barClick="$router.push({path:'/personCollect'})"></PerBar>
      <PerBar barMe="设置" barRight @barClick></PerBar>
      <button @click="$router.push({path:'/'})">返回主页</button>
    </div>
  </div>
</template>

<script>
import PerBar from "@/components/PerBar";
export default {
  components: {
    PerBar
  },
  methods: {
    // 关注点击事件
    attentionClick() {
      this.$router.push({
        path: "/personAttention"
      });
    },
    //前往编辑页
    goExit() {
      this.$router.push({
        path: "/personExit"
      });
    }
  },
  mounted() {
    const id = +localStorage.getItem("user_id");
    // console.log(id);
    this.$axios({
      url: "/user/" + id,
      method: "get",
      headers: {
        Authorization: localStorage.getItem("token")
      }
    }).then(res => {
      // console.log(res.data.data);
      this.data = res.data.data;
    });
  },
  data() {
    return {
      data: ""
    };
  }
};
</script>

<style lang="less" scoped>
.material {
  display: flex;
  padding: 8.333vw;
  border-bottom: 5px solid #e4e4e4;
  .matLeft {
    img {
      width: 18.056vw;
      border-radius: 50%;
      border: 1px solid #000;
    }
  }
  .matcenter {
    padding-left: 4.167vw;
    flex: 1;
    display: flex;
    flex-direction: column;
    .matcenter_name {
      padding: 1.111vw 0;
      span {
        padding-right: 3px;
      }
      .iconxingbienan {
        color: blue;
      }
      .iconxingbienv {
        color: red;
      }
    }
  }
  .matright {
    display: flex;
    align-items: center;
  }
}
</style>